<script setup lang="ts">
import { getDeviceInfoList, removeDevice } from '@/api/device';
import type { DeviceInfo } from '@/api/device/type';
import { onMounted, ref } from 'vue';
import RegisterDevice from './components/RegisterDevice.vue';
import { ElMessage } from 'element-plus';
import type { Result } from '@/utils/request';

const deviceInfoList = ref([] as DeviceInfo[]);
const showRegisterDevice = ref(false);

onMounted(() => {
    init();
})

const init = () => {
    getDeviceInfoList().then((res) => {
        deviceInfoList.value = res.data;
    })
}

const openEdit = (deviceInfo: DeviceInfo) => {
    console.log(deviceInfo);
}

const openRemove = (deviceInfo: DeviceInfo) => {
    removeDevice(deviceInfo.id).then((res) => {
        const {msg} = res as Result;
        ElMessage({
            message: msg,
            type: 'success'
        });
        init();
    });
}

const openBinding = (deviceInfo: DeviceInfo) => {
    
}

</script>

<template>
    <div class="content">
        <div class="header">
            <el-button type="primary" @click="showRegisterDevice = true">注册设备</el-button>
        </div>
        <el-table :data="deviceInfoList" style="width: 100%" stripe border>
            <el-table-column prop="id" label="设备ID" />
            <el-table-column prop="name" label="设备名" />
            <el-table-column prop="created" label="创建时间" />
            <el-table-column prop="updated" label="更新时间" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="openEdit(scope.row)">修改</el-button>
                    <el-button link type="primary" size="small" @click="openRemove(scope.row)">删除</el-button>
                    <el-button link type="primary" size="small" @click="openBinding(scope.row)">下载设备二维码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <RegisterDevice v-model="showRegisterDevice" @update="init()"></RegisterDevice>
    </div>
</template>

<style lang="scss" scoped>
.content {
    .header {
        margin-bottom: 1%;
    }
}
</style>